<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> -->


		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">

		<style type="text/css">

		</style>
		<title>14.6 bootstrap  navbar </title>
	</head>
	<body>

		<div class="navbar navbar-default">



			<div class="container">




				<div class="navbar-header">

					<a class="navbar-brand" href="#">
						李栓蛋网
						<!-- <img alt="李栓蛋网" src="..."> -->
					</a>

				</div>

				<ul class="nav navbar-nav">
					<li><a href="#"> 首页</a></li>
					<li><a href="#"> 推荐</a></li>
					<li><a href="#"> 学习</a></li>
				</ul>
				
				
				<form action="" class="navbar-form navbar-left">
					
					<div class="form-group ">
	
						<input type="text" class="form-control" placeholder="Search" >
						<button type="button" class="btn btn-default ">搜索</button>
					</div>
					
				</form>
				

				<ul class="nav navbar-nav  navbar-right">
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
				</ul>


			</div>


		</div>

		<div class="container">
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assbbdbb incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti
				necessitatibus quidem facilis quaerat dolores sapiente debitis. Repudiandae accusantium nihil animi sed
				deserunt unde minus laboriosam odit maxime aliquid nobis ducimus! </div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias cupiditate doloremque esse
				similique assumenda incidunt eaque quos vel obcaecati nulla. Cupiditate incidunt mollitia beatae quidem
				autem natus nulla saepe dolorem.</div>

		</div>

	</body>
</html>
